<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top: 10px">
        <div slot="header" class="header">
            <el-tabs class="demo-tabs" v-model="activeName">
                <el-tab-pane label="销售额" name="sale"></el-tab-pane>
                <el-tab-pane label="访问量" name="visite"></el-tab-pane>
            </el-tabs>
            <!--右侧结构-->
            <div class="right">
                <span @click="today">今日</span>
                <span @click="week">本周</span>
                <span @click="month">本月</span>
                <span @click="year">今年</span>
                <!--日历-->
                <el-date-picker v-model="timeArr" type="daterange" range-separator="-" start-placeholder="入住时间"
                    end-placeholder="离开时间" size="small" value-format="YYYY-MM-DD" />
            </div>
        </div>
        <!--卡片身体部分-->
        <el-row :gutter="20">
            <el-col :span="18" :offset="0">
                <v-chart :option="getOption()" style="height: 400px" autoresize></v-chart>
            </el-col>
            <!-- 右侧排序部分 -->
            <el-col :span="6" :offset="0">
                <h6>门店{{ activeName == "sale" ? "销售额" : "访问量" }}排名</h6>
                <ul v-show="activeName == 'sale'">
                    <li v-for="(item,index) in arr" :key="index"> 
                        <span>{{item.no}}</span>
                        <span>{{item.name}}</span>
                        <span>{{item.count}}</span>
                    </li>
                </ul>
            </el-col>
        </el-row>
        

    </el-card>
</template>
  
<script setup lang="ts">
import { ref } from "vue";
import dayjs from 'dayjs'
//收集选项卡的数据
let activeName = ref("sale");
//日历的数据
let timeArr = ref<any>([])

const today = () => {
    //获取今日的时间
    let start = dayjs().format("YYYY-MM-DD");
    let end = dayjs().format("YYYY-MM-DD");
    timeArr.value = [start, end];
};

const week = () => {
    let start = dayjs().day(1).format("YYYY-MM-DD");
    let end = dayjs().day(7).format("YYYY-MM-DD");
    timeArr.value = [start, end];
}

const month = () => {
    let start = dayjs().startOf('month').format("YYYY-MM-DD");
    let end = dayjs().endOf('month').format("YYYY-MM-DD");
    timeArr.value = [start, end];
}

const year = () => {
    let start = dayjs().startOf('year').format("YYYY-MM-DD");
    let end = dayjs().endOf('year').format("YYYY-MM-DD");
    timeArr.value = [start, end];
}

//左侧柱状图的配置项
const getOption = () => {
    return {
        //标题
        title: {
            text: activeName.value == "sale" ? "销售量" : "访问量",
        },
        //提示组件
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        xAxis: [
            {
                type: "category",
                data: props.x,
                axisTick: {
                    alignWithLabel: true,
                },
            },
        ],
        yAxis: [
            {
                //y轴线展示
                axisLine: {
                    show: true,
                },
                //y轴的刻度
                axisTick: {
                    show: true,
                },
            },
        ],
        series: [
            {
                name: "Direct",
                type: "bar",
                barWidth: "60%",
                data: activeName.value == "sale" ? props.saleArr : props.visiteArr,
                //展示数值
                label: {
                    show: true,
                    //文本位置
                    position: 'top',
                }
            },
        ],
    }
}

let props = defineProps(["saleArr", "visiteArr", "x","arr","arr1"]);
</script>
  
<style scoped>
.header {
    position: relative;
}

.right {
    position: absolute;
    right: 0;
    top: 10px;
    font-size: 12px;
}

.right span {
    margin: 0px 5px;
}
ul{
    font-size: 16px;
}
li{
    display: flex;
  /**水平轴对齐方式**/
  justify-content: space-between;
}
</style>